<template>
	<view style="width: 100%; display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100vh;">
		<!-- 意向选择框 -->
		<view style="width: 702rpx;height: 96rpx;display: flex;justify-content: space-between;align-items: center;">
			<text style="font-size: 28rpx;color: #333333;">跟进状态</text>
			<radio-group @change="selectChange" style="font-size: 26rpx;color: #666666;">
				<label class="radio" style="margin-right: 40rpx;">
					<radio value="有意向" checked="true" />
					有意向
				</label>
				<label class="radio">
					<radio value="无意向" />
					无意向
				</label>
			</radio-group>
		</view>
		<!-- 分割线 -->
		<view style="width: 100%;height: 1px;background-color: #F7F8FF;"></view>

		<!-- 下次跟进时间 -->
		<view style="width: 702rpx;height: 96rpx;display: flex;justify-content: space-between;align-items: center;">
			<text style="font-size: 28rpx;color: #333333;">下次跟进时间</text>
			<!-- 日期选择器 -->
			<picker mode="date" :value="date" start="2020-01-01" end="2025-01-23" @change="bindDateChange">
				<view>{{ follow ? follow : '请点击选择跟进时间' }}</view>
			</picker>
		</view>
		<!-- 分割线 -->
		<view style="width: 100%;height: 1px;background-color: #F7F8FF;"></view>

		<!-- 跟进备注 -->
		<view style="width: 702rpx;height: 96rpx;display: flex;align-items: center;">
			<text style="font-size: 28rpx;color: #333333;line-height: 28rpx;">下次跟进时间</text>
			<input placeholder="不超过10个字" maxlength="10" v-model="explain" style="flex-grow: 1; margin-left: 50rpx;font-size: 28rpx;color: #333333;" />
		</view>
		<!-- 分割线 -->
		<view style="width: 100%;height: 10rpx;background-color: #F7F8FF;"></view>

		<!-- 提交按钮 -->
		<view style="width: 702rpx;height: 70rpx;background-color: #3187F8;margin-top: 27rpx;text-align: center;line-height: 70rpx;color: #FFFFFF;" @click="submit">提交</view>

		<!-- 跟进记录 -->
		<view style="font-size: 32rpx;color: #333333;width: 702rpx;text-align: start;margin-top: 46rpx; margin-bottom: 10rpx;">跟进记录</view>
		<scroll-view
			:enable-flex="true"
			:show-scrollbar="false"
			@scrolltolower="lower"
			:scroll-y="true"
			style="width: 100%; display: flex;flex-direction: column; align-items: center;flex: auto;flex-basis: 50vh;"
		>
			<view style="width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;" v-for="(item, index) in data" :key="index">
				<!-- 跟进记录item -->
				<view style="width: 702rpx;height: 86rpx; display: flex;justify-content: space-between;align-items: center;font-size: 26rpx;color: #666666;line-height: 86rpx;">
					<text>{{ item.wish }}</text>
					<text>{{ item.explain }}</text>
					<text>{{ item.create_time }}</text>
				</view>
				<view style="width: 100%;height: 1px;background-color: #F7F8FF;"></view>
			</view>

			<xw-empty :isShow="emptyShow" text="暂无相关数据" textColor="#777777"></xw-empty>
		</scroll-view>
	</view>
</template>

<script>
import xwEmpty from '@/components/xw-empty/xw-empty';
export default {
	components: { xwEmpty },
	data() {
		return {
			page: 1,
			limit: 10,
			emptyShow: false,
			aid: '',
			wish: 1,
			follow: '',
			explain: '',
			data: [],
		};
	},
	onLoad(e) {
		this.aid = e.id;
		this.getFollowUp(e.id);
	},
	methods: {
		// 更换意向选择
		selectChange(evt) {
			evt.target.value == '无意向' ? (this.wish = 0) : (this.wish = 1);
		},
		// 选择跟进时间
		bindDateChange(e) {
			this.follow = e.detail.value;
		},
		// 页面滑动到底部触发
		lower() {
			this.getFollowUp(this.aid);
		},
		async getFollowUp(id) {
			let res;
			try {
				res = await this.$request.post('api/User/user_coach_list', {
					data: {
						aid: id,
						page: this.page,
						limit: this.limit,
					},
				});

				if (res.data.code == 1) {
					this.data = [...this.data, ...res.data.data];
					console.log('this.data :>> ', this.data);
					this.page += 1;
					this.data.length == 0 ? (this.emptyShow = true) : '';
				}
				//uni.$showMsg(res.data.msg);
			} catch (e) {
				//TODO handle the exception
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none',
				});
			}
		},
		async submit() {
			if (!this.follow) return uni.$showMsg('请选择跟进时间!');
			if (!this.explain) return uni.$showMsg('请填写跟进备注!');

			let res;
			try {
				res = await this.$request.post('api/User/add_coach_log', {
					data: {
						uid: uni.getStorageSync('id'),
						aid: this.aid,
						wish: this.wish,
						follow: this.follow,
						explain: this.explain,
					},
				});

				uni.$showMsg(res.data.msg);
				this.getFollowUp(this.aid);
				this.follow = '';
				this.explain = '';
			} catch (e) {
				//TODO handle the exception
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none',
				});
			}
		},
	},
};
</script>

<style>
.placeholderStyle {
	font-size: 28rpx;
	line-height: 28rpx;
	color: #999999;
}
</style>
